import 'package:childrenapp/details.dart';
import 'package:childrenapp/settlement.dart';
import 'package:flutter/material.dart';

import 'home_page.dart';

class Buy extends StatefulWidget {
  const Buy({super.key});

  @override
  State<Buy> createState() => _BuyState();
}

class _BuyState extends State<Buy> {
  bool isChecked1 = true;
  bool isChecked2 = true;
  bool isChecked3 = true;
  int num1 = 1;
  int num2 = 1;
  int num3 = 1;
  double money = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.only(left: 20, right: 20, top: 60, bottom: 30),
        child: Column(
          children: [
            // Padding(padding: EdgeInsets.only(top: 60)),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                GestureDetector(
                  onTap: () {
                    Navigator.push(context,
                        MaterialPageRoute(builder: (context) {
                      return Home_Page();
                    }));
                  },
                  child: Container(
                    width: 60,
                    height: 60,
                    decoration: BoxDecoration(
                        color: Color.fromRGBO(245, 245, 245, 1.0),
                        borderRadius: BorderRadius.circular(20)),
                    child: const Center(
                      child: Image(
                        image: AssetImage(
                          'images/Icon/Arrow - Left 3.png',
                        ),
                        width: 30,
                        height: 30,
                      ),
                    ),
                  ),
                ),
                Container(
                  child: Text(
                    'Cart',
                    style: TextStyle(fontSize: 22, fontWeight: FontWeight.w600),
                  ),
                ),
                Container(
                  width: 60,
                  height: 60,
                  decoration: BoxDecoration(
                      color: Color.fromRGBO(245, 245, 245, 1.0),
                      borderRadius: BorderRadius.circular(20)),
                  child: const Center(
                    child: Image(
                      image: AssetImage(
                        'images/Icon/more vertical.png',
                      ),
                      width: 30,
                      height: 30,
                    ),
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 20,
            ),
            Expanded(
                flex: 2,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Container(
                      padding: EdgeInsets.only(left: 10),
                      height: 150,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(30),
                        color: Color.fromRGBO(245, 245, 245, 1.0),
                      ),
                      // child: CheckboxListTile(value: value, onChanged: onChanged))
                      child: Row(
                        children: [
                          ClipRRect(
                            borderRadius: BorderRadius.circular(15),
                            child: Container(
                              width: 100,
                              height: 100,
                              child: const Image(
                                image: AssetImage(
                                    'images/Image/full-length-portrait-cute-little-kid-boy-stylish-jeans-clothes-smiling-standing-white-kids-fashion-concept 1.png'),
                                fit: BoxFit.cover,
                                alignment: Alignment.topCenter,
                              ),
                            ),
                          ),
                          Container(
                            padding: EdgeInsets.symmetric(
                                horizontal: 15, vertical: 25),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  'Warm Ladis Shirts',
                                  style: TextStyle(fontSize: 18),
                                ),
                                Text(
                                  '\$14.00',
                                  style: TextStyle(
                                      fontSize: 22,
                                      fontWeight: FontWeight.w600),
                                ),
                                Row(
                                  children: [
                                    GestureDetector(
                                      onTap: () {
                                        setState(() {
                                          num1 == 1 ? null : num1 -= 1;
                                        });
                                      },
                                      child: Container(
                                        height: 16,
                                        width: 16,
                                        decoration: BoxDecoration(
                                            color:
                                                Color.fromRGBO(51, 51, 51, 1.0),
                                            borderRadius:
                                                BorderRadius.circular(5)),
                                        child: Center(
                                            child: Text(
                                          '-',
                                          style: TextStyle(color: Colors.white),
                                        )),
                                      ),
                                    ),
                                    Container(
                                      width: 28,
                                      // padding: EdgeInsets.symmetric(horizontal: 5),
                                      child: Center(child: Text('${num1}')),
                                    ),
                                    GestureDetector(
                                      onTap: () {
                                        setState(() {
                                          num1 = num1 + 1;
                                        });
                                      },
                                      child: Container(
                                        height: 16,
                                        width: 16,
                                        decoration: BoxDecoration(
                                            color:
                                                Color.fromRGBO(51, 51, 51, 1.0),
                                            borderRadius:
                                                BorderRadius.circular(5)),
                                        child: Center(
                                            child: Text(
                                          '+',
                                          style: TextStyle(color: Colors.white),
                                        )),
                                      ),
                                    ),
                                  ],
                                )
                              ],
                            ),
                          ),
                          Expanded(
                            child: Container(
                              alignment: Alignment.centerRight,
                              // color: Colors.black,
                              child: Checkbox(
                                value: isChecked1,
                                onChanged: (Value) {
                                  setState(() {
                                    isChecked1 = Value!;
                                  });
                                },
                                activeColor: Colors.black,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.only(left: 10),
                      height: 150,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(30),
                        color: Color.fromRGBO(245, 245, 245, 1.0),
                      ),
                      // child: CheckboxListTile(value: value, onChanged: onChanged))
                      child: Row(
                        children: [
                          ClipRRect(
                            borderRadius: BorderRadius.circular(15),
                            child: Container(
                              width: 100,
                              height: 100,
                              child: const Image(
                                image: AssetImage(
                                    'images/Image/full-length-portrait-cute-little-teen-girl-stylish-jeans-clothes-looking-camera-smiling-against-white-studio-wall-kids-fashion-concept 1.png'),
                                fit: BoxFit.cover,
                                alignment: Alignment.topCenter,
                              ),
                            ),
                          ),
                          Container(
                            padding: EdgeInsets.symmetric(
                                horizontal: 15, vertical: 25),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  'Warm Ladis Shirts',
                                  style: TextStyle(fontSize: 18),
                                ),
                                Text(
                                  '\$15.00',
                                  style: TextStyle(
                                      fontSize: 22,
                                      fontWeight: FontWeight.w600),
                                ),
                                Row(
                                  children: [
                                    GestureDetector(
                                      onTap: () {
                                        setState(() {
                                          num2 == 1 ? null : num2 -= 1;
                                        });
                                      },
                                      child: Container(
                                        height: 16,
                                        width: 16,
                                        decoration: BoxDecoration(
                                            color:
                                                Color.fromRGBO(51, 51, 51, 1.0),
                                            borderRadius:
                                                BorderRadius.circular(5)),
                                        child: Center(
                                            child: Text(
                                          '-',
                                          style: TextStyle(color: Colors.white),
                                        )),
                                      ),
                                    ),
                                    Container(
                                      width: 28,
                                      child: Center(child: Text('${num2}')),
                                    ),
                                    GestureDetector(
                                      onTap: () {
                                        setState(() {
                                          num2 += 1;
                                        });
                                      },
                                      child: Container(
                                        height: 16,
                                        width: 16,
                                        decoration: BoxDecoration(
                                            color:
                                                Color.fromRGBO(51, 51, 51, 1.0),
                                            borderRadius:
                                                BorderRadius.circular(5)),
                                        child: Center(
                                            child: Text(
                                          '+',
                                          style: TextStyle(color: Colors.white),
                                        )),
                                      ),
                                    ),
                                  ],
                                )
                              ],
                            ),
                          ),
                          Expanded(
                            child: Container(
                              alignment: Alignment.centerRight,
                              // color: Colors.black,
                              child: Checkbox(
                                value: isChecked2,
                                onChanged: (Value) {
                                  setState(() {
                                    isChecked2 = Value!;
                                  });
                                },
                                activeColor: Colors.black,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.only(left: 10),
                      height: 150,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(30),
                        color: Color.fromRGBO(245, 245, 245, 1.0),
                      ),
                      // child: CheckboxListTile(value: value, onChanged: onChanged))
                      child: Row(
                        children: [
                          ClipRRect(
                            borderRadius: BorderRadius.circular(15),
                            child: Container(
                              width: 100,
                              height: 100,
                              child: const Image(
                                image: AssetImage(
                                    'images/Image/pretty-young-boy-casual-clothes-white-wall-fashionable-posing-caucasian-male-preschooler-with-bright-facial-emotions-childhood-expression-having-fun-posing-crossed-hands 1.png'),
                                fit: BoxFit.cover,
                                alignment: Alignment.topCenter,
                              ),
                            ),
                          ),
                          Container(
                            padding: EdgeInsets.symmetric(
                                horizontal: 15, vertical: 25),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  'Warm Jeans Shirts',
                                  style: TextStyle(
                                    fontSize: 18,
                                  ),
                                ),
                                Text(
                                  '\$14.00',
                                  style: TextStyle(
                                      fontSize: 22,
                                      fontWeight: FontWeight.w600),
                                ),
                                Row(
                                  children: [
                                    GestureDetector(
                                      onTap: () {
                                        setState(() {
                                          num3 == 1 ? null : num3 -= 1;
                                        });
                                      },
                                      child: Container(
                                        height: 16,
                                        width: 16,
                                        decoration: BoxDecoration(
                                            color:
                                                Color.fromRGBO(51, 51, 51, 1.0),
                                            borderRadius:
                                                BorderRadius.circular(5)),
                                        child: Center(
                                          child: Text(
                                            '-',
                                            style:
                                                TextStyle(color: Colors.white),
                                          ),
                                        ),
                                      ),
                                    ),
                                    Container(
                                      width: 28,
                                      child: Center(child: Text('${num3}')),
                                    ),
                                    GestureDetector(
                                      onTap: () {
                                        setState(() {
                                          num3 += 1;
                                        });
                                      },
                                      child: Container(
                                        height: 16,
                                        width: 16,
                                        decoration: BoxDecoration(
                                            color:
                                                Color.fromRGBO(51, 51, 51, 1.0),
                                            borderRadius:
                                                BorderRadius.circular(5)),
                                        child: Center(
                                            child: Text(
                                          '+',
                                          style: TextStyle(color: Colors.white),
                                        )),
                                      ),
                                    ),
                                  ],
                                )
                              ],
                            ),
                          ),
                          Expanded(
                            child: Container(
                              alignment: Alignment.centerRight,
                              // color: Colors.black,
                              child: Checkbox(
                                value: isChecked3,
                                onChanged: (Value) {
                                  setState(() {
                                    isChecked3 = Value!;
                                  });
                                },
                                activeColor: Colors.black,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                )),
            Expanded(
                flex: 1,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Container(
                      child: Column(
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                'Itemes:(3)',
                                style: TextStyle(
                                    color: Color.fromRGBO(203, 203, 203, 1.0),
                                    fontSize: 22),
                              ),
                              Text(
                                'Total:\$${num1 * 14.00 + num2 * 15.00 + num3 * 14.00}',
                                style: TextStyle(
                                    fontSize: 22, fontWeight: FontWeight.w600),
                              ),
                            ],
                          ),
                          SizedBox(
                            height: 10,
                          ),
                          Container(
                            height: 1,
                            color: Color.fromRGBO(203, 203, 203, 1.0),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      width: MediaQuery.of(context).size.width - 40,
                      height: 60,
                      child: ElevatedButton(
                        onPressed: () {
                          Navigator.push(context,
                              MaterialPageRoute(builder: (context) {
                            return Settlement();
                          }));
                        },
                        child: Text(
                          'Chealout',
                          style: TextStyle(fontSize: 22),
                        ),
                        style: ButtonStyle(
                          shape: MaterialStateProperty.all(
                              RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(25))),
                          backgroundColor: MaterialStateProperty.all(
                            Color.fromRGBO(51, 51, 51, 1.0),
                          ),
                        ),
                      ),
                    )
                  ],
                ))
          ],
        ),
      ),
    );
  }
}
